<template>
	<view class="details">
		<!-- 地址 -->
		<view class="details-box">
			<view class="u-flex">
				<view class="item-box-image">
					<u-image
						class="image" 
						width="80rpx" 
						height="80rpx" 
						src="http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg"></u-image>
				</view>
				<view class="info">
					<view class="title u-font-lg">
						YSL圣罗兰精彩底妆礼盒
						小金条21小粉条
					</view>
				</view>
			</view>
			
			<view class="box-item u-m-t-30">
				<view class="tiem u-flex">
					<view class="txt">报名截止日期</view>
					<view class="num">2020-02-11</view>
				</view>
				<view class="info-item u-m-t-20 u-flex">
					<u-image
						class="image" 
						width="40rpx" 
						height="40rpx" 
						src="/static/icons/brand_icon.png"></u-image>
					<view class="text u-font-sm u-p-l-10">品牌名称:</view>
					<view class="num u-font-sm">海蓝之谜</view>
				</view>
				<view class="info-item u-flex">
					<u-image
						class="image" 
						width="40rpx" 
						height="40rpx" 
						src="/static/icons/fans_icon.png"></u-image>
						<view class="text u-p-l-10 u-font-sm">粉丝要求:</view>
					<view class="num u-font-sm">100<text class="u-font-xs">w+</text></view>
				</view>
				<view class="info-item u-flex">
					<view class="u-flex">
						<u-image
							class="image" 
							width="40rpx" 
							height="40rpx" 
							src="/static/icons/checked_icon.png"></u-image>
						<view class="text u-p-l-10 u-font-sm look">平台需求:</view>
					</view>
					<view class="type u-font-md">抖音</view>
				</view>
			</view>
			
		</view>
		
		<view class="details-text">
			<view class="tit">招募说明</view>
			<view class="txt">账号要求:</view>
			<view class="txt">1、粉丝不做具体要求，万粉左右，低于1w均可;</view>
			<view class="txt">2、赞藏/粉丝比例，大于2;</view>
			<view class="txt">3、账号权重，困困薯及以上;</view>
			<view class="txt">4、有过爆款笔记，1k即算爆款;</view>
			<view class="txt">5、有维护评论的习惯。</view>
			<view class="txt">6、垫子或者枕头品牌随机发送，产品赠送。亲们酌情报价，品牌优先考虑置换和酌情优惠博主。</view>
			
			<view class="txt">笔记要求</view>
			<view class="txt">1、标题不要求植入品牌词;</view>
			<view class="txt">2、希尔顿、枕芯、舒适垫，是三个必须植入的关键
			词，结合具体产品;</view>
			<view class="txt">3、图片拍摄编辑需精美，且芾标签;</view>
			<view class="txt">4、笔记结尾最好带tag，比如#家居好物推荐#</view>
			<view class="txt">5、全部图文;</view>
			<view class="txt">6、品牌报备不做硬性要求，可通过多品合集方式规避删帖风险。</view>
			<view class="icon u-m-t-20">
				<u-image
					class="image" 
					width="100%" 
					height="500rpx" 
					src="/static/img/xxx.png"></u-image>
			</view>
		</view>
		
		<view class="details-text u-m-t-40">
			<view class="tit">商品详情</view>
			<view class="txt">维生素e是一种bai对人体du生长、发育、促进zhi健康与预防衰老有关的营养要素。早在1992年evens等已发现它的功能，可调节生育机能，防治流产和不育。半个世纪以来，就生理和机理作用，近代分子生物学学者作了详尽研究，在营养及医疗上有了重要发现。</view>
			<view class="icon u-m-t-20">
				<u-image
					class="image" 
					width="100%" 
					height="1800rpx" 
					src="/static/img/cccc.png"></u-image>
			</view>
		</view>
		
		
		<view class="details-text u-m-t-30">
			<view class="tit">联系方式</view>
			<view class="u-flex u-row-between">
				<view class="u-flex">
					<u-image
						class="image" 
						width="80rpx" 
						height="80rpx" 
						border-radius="80rpx"
						:src="url">
					</u-image>
					<view class="u-p-l-20">Amy丶爱丽丝</view>
				</view>
				<view class="">
					<u-button hover-class="none" type="error" class="iponeBtn" size="medium" shape="circle">13216115878</u-button>
				</view>
			</view>
		</view>
		
		<view class="details-text u-m-t-30">
			<view class="tit u-flex u-row-between">
				<view>浏览记录</view>
				<view class="look u-flex">
					<u-image
					class="image" 
					width="40rpx" 
					height="40rpx" 
					src="/static/icons/checked_icon.png"></u-image>108查看
				</view>
			</view>
			<view class="u-flex u-flex-wrap">
				<view class="" v-for="(item,index) in 30">
					<u-image
						class="image u-m-r-20 u-m-b-20" 
						width="70rpx" 
						height="70rpx" 
						border-radius="70rpx"
						:src="url">
					</u-image>
				</view>
			</view>
		</view>
		
		<view class="detailsBtn u-flex" @click="send">
			<view class="item u-flex">
				<view class="nav u-text-center u-flex u-flex-col">
					<u-image
						class="image" 
						width="40rpx" 
						height="40rpx" 
						src="/static/icons/shangjiazixun_icon.png"></u-image>
						<view class="txt">一键转群</view>
				</view>
				<view class="nav  u-text-center u-flex u-flex-col">
					<u-image
						class="image" 
						width="40rpx" 
						height="40rpx" 
						src="/static/icons/shangjiazixun_icon.png"></u-image>
						<view class="txt">分享码</view>
				</view>
				<view class="nav  u-text-center u-flex u-flex-col">
					<u-image
						class="image" 
						width="40rpx" 
						height="40rpx" 
						src="/static/icons/shangjiazixun_icon.png"></u-image>
						<view class="txt">更多通告</view>
				</view>
			</view>
			<view class="item action">已报名</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
			}
		},
		methods: {
			send(){
				console.log('111')
			},
			
		},onLoad() {
			
		}
	}
</script>

<style lang="scss" scoped>
.details{
	padding: 30rpx;
	padding-bottom: 120rpx;
	&-box{
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		.info{ 
			padding-left: 20rpx;
			width: 80%;
			.title{  
				display: flex; align-items: center; line-height: 45rpx; font-weight: 600;
				.u-font-lg{ padding-left: 20rpx; }
			}
		 } 
		
		.box-item{
			.tiem{
				.txt{ color:#DE4F38; background-color: #fcedeb; border:1px solid #fcedeb; padding: 10rpx 20rpx; }
				.num{ color:#DE4F38; border:1px solid #DE4F38;  padding: 10rpx 20rpx;}
			}
			.info-item{
				margin-bottom: 15rpx;
				.type{ margin-left: 20rpx; background-color: #f5f5f5; color:#000; padding:10rpx 20rpx; border-radius: 40rpx; }
			}
		}
		 
	}
	&-text{
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		.tit{
			position: relative;
			height: 40rpx;
			line-height: 40rpx;
			padding-left: 40rpx;
			font-size: 34rpx;
			margin-bottom: 30rpx;
			.look{
				font-size: 28rpx;
				color: #999;
			}
			&::after{
				content: "";
				width: 8rpx;
				height: 100%;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #de4f38;
			}
		}
		.txt{
			height: auto;
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}
		.iponeBtn{
			padding: 0 30rpx;
		}
	}
	
	
	.detailsBtn{
		position: fixed; 
		bottom: 0; 
		left:0; 
		z-index: 999; 
		text-align: center; 
		font-size: 32rpx; 
		width: 100%; 
		height:100rpx; 
		background-color: #fff; 
		.item{
			flex: 1;
			&.action{
				background-color: #DE4F38;
				color: #fff;
				height: 100rpx;
				line-height: 100rpx;
			}
			.nav{
				flex: 1;
				.txt{
					font-size: 26rpx;
					margin-top: 10rpx;
					color: #999;
				}
			}
		}
	}
}
</style>
